<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-button type="primary" @click="addUser">新增用户</el-button>
				</el-form-item>
				<el-form-item prop="date">
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				
				<el-form-item>
					<el-select v-model="filters.storeId" clearable placeholder="所属门店">
						<el-option v-for="item,index in roles" :label="item.name" :value="item.id"
						           :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.level" clearable placeholder="级别">
						<el-option label="一级" value="1">
						</el-option>
						<el-option label="二级" value="2">
						</el-option>
						<el-option label="三级" value="3">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="searchType">
					<el-select v-model="filters.searchType" clearable>
						<el-option label="用户ID" value="1"></el-option>
						<el-option label="用户姓名" value="2"></el-option>
						<el-option label="手机号" value="3"></el-option>
						<el-option label="会员卡号" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="input" v-if="!filters.searchType == ''">
					<el-input v-if="filters.searchType == '1'" v-model="filters.input" placeholder="用户ID"></el-input>
					<el-input v-if="filters.searchType == '2'" v-model="filters.input" placeholder="用户姓名"></el-input>
					<el-input v-if="filters.searchType == '3'" v-model="filters.input" placeholder="手机号"></el-input>
					<el-input v-if="filters.searchType == '4'" v-model="filters.input" placeholder="会员卡号"></el-input>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
					<el-button type="primary" @click="levelSetup">级别设置</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="users" highlight-current-row style="width: 100%;">
			<el-table-column prop="id" label="用户id" align="center" min-width="100" fixed></el-table-column>
			<el-table-column prop="nickname" label="用户昵称" align="center" min-width="160"></el-table-column>
			<el-table-column prop="username" label="用户姓名" align="center" min-width="160"></el-table-column>
			<el-table-column prop="phone" label="手机号" align="center" min-width="160"></el-table-column>
			<el-table-column prop="cardno" label="会员卡号" align="center" min-width="160"></el-table-column>
			<el-table-column prop="channel" label="渠道" align="center" min-width="120"></el-table-column>
			<el-table-column prop="level" label="级别" align="center" min-width="120"></el-table-column>
			<el-table-column prop="store" label="所属门店" align="center" min-width="160"></el-table-column>
			<el-table-column prop="create_time" label="创建时间" :formatter="formatDateTime" align="center"
			                 min-width="180"></el-table-column>
			<el-table-column prop="last_login_time" label="最后登录时间" :formatter="formatDateTime" align="center"
			                 min-width="180"></el-table-column>
			<el-table-column label="操作" align="center" min-width="240" fixed="right">
				<template slot-scope="scope">
					<el-button size="small" @click="handleView(scope.$index, scope.row)">查看</el-button>
					<el-button size="small" @click="handleAccount(scope.$index, scope.row)">账户</el-button>
					<el-button size="small" @click="handleRelative(scope.$index, scope.row)">上下级</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		
		<!--新增用户界面-->
		<el-dialog title="新增用户" v-model="addUserFormVisible" :close-on-click-modal="false">
			<el-form :model="addUserForm" label-width="80px" :rules="addUserFormRules" ref="addUserForm">
				<el-form-item label="用户头像" prop="portrait">
					<el-upload class="upload-demo"
					           action="/file/upload"
                                name="file"
                                :data="fileTypeAdd"
                                :on-success="handleAvatarSuccess"
                                multiple
                                :limit="5"
                                list-type="picture-card"
                                :file-list="fileList">
		                        <i class="el-icon-plus"></i>                 
					</el-upload>
				</el-form-item>
				<el-form-item label="用户昵称" prop="nickName">
					<el-input v-model="addUserForm.nickName" placeholder="输入用户真实姓名" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="addUserForm.sex">
						<el-radio label="1">男</el-radio>
						<el-radio label="2">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="登录帐号" prop="mobile">
					<el-input v-model="addUserForm.mobile" placeholder="11位数字" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="password">
					<el-input v-model="addUserForm.password" placeholder="设置登录密码" auto-complete="off"></el-input>
				</el-form-item>
				<div><h3>补充信息(选填)</h3></div>
				<el-form-item label="所属门店">
					<el-select v-model="addUserForm.storeId" clearable placeholder="所属门店">
						<el-option v-for="item,index in roles" :label="item.name" :value="item.id"
						           :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="会员卡号" prop="cardno">
					<el-input v-model="addUserForm.cardNumber" placeholder="请输入会员卡号" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="级别">
					<el-select v-model="addUserForm.level" clearable placeholder="级别">
						<el-option label="一级" value="1">
						</el-option>
						<el-option label="二级" value="2">
						</el-option>
						<el-option label="三级" value="3">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addUserFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addSubmit('addUserForm')">提交</el-button>
			</div>
		</el-dialog>
		
		<!--级别设置界面-->
		<el-dialog title="级别设置" v-model="levelSetupFormVisible" :close-on-click-modal="false">
			<div class="add-wrap" v-for="(item,index) in arr" :key="index">
				<p>级别{{item.level}}</p>
				<p @click="changeStatus(index)">{{ item.isDefault == 0 ? '已默认' : '设为默认'}}</p>
				<p>{{item.id}}级</p>
				<p>{{item.name}}</p>
			</div>
			
			<div slot="footer" class="dialog-footer">
				<!--<el-button type="primary" :loading="addLoading" @click.native="addLevel">确认</el-button>-->
				<el-button @click.native="levelSetupFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>
		
		
		<!--帐户界面-->
		<el-dialog title="帐户详情" v-model="viewAccountFormVisible" :close-on-click-modal="false">
			<el-form :model="viewAccountForm" label-width="100px">
				<el-col :span="24">
					<el-col :span="10">
						<el-form-item label="用户id" prop="id">
							<el-input v-model="viewAccountForm.id" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="用户昵称" prop="nickname">
							<el-input v-model="viewAccountForm.nickname" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-col :span="10">
						<el-form-item label="用户姓名" prop="username">
							<el-input v-model="viewAccountForm.username" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="会员卡号" prop="cardno">
							<el-input v-model="viewAccountForm.cardno" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-col :span="10">
						<el-form-item label="余额" prop="balance">
							<el-input v-model="viewAccountForm.balance" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="积分总额" prop="points">
							<el-input v-model="viewAccountForm.points" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="24">
					<el-col :span="10">
						<el-form-item label="返利总额" prop="rebateBalance">
							<el-input v-model="viewAccountForm.rebateBalance" auto-complete="off" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="可提现金额" prop="canWithdrawBalance">
							<el-input v-model="viewAccountForm.canWithdrawBalance" auto-complete="off"
							          disabled></el-input>
						</el-form-item>
					</el-col>
				</el-col>
			</el-form>
			<h3>交易流水</h3>
			<el-table :data="balances" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
			          style="width: 100%;">
				<el-table-column prop="time" label="日期时间" :formatter="formatDateTime">
				</el-table-column>
				<el-table-column prop="type" label="类型" align="center">
				</el-table-column>
				<el-table-column prop="amount" label="金额" align="center">
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="viewAccountFormVisible = false">关 闭</el-button>
			</div>
		</el-dialog>
		
		<!--查看上下级界面-->
		<el-dialog title="查看上下级" v-model="viewRelativeFormVisible" :close-on-click-modal="false">
			<el-form :model="viewRelativeForm" label-width="100px">
				<el-form-item label="用户id" prop="id">
					<el-input v-model="viewRelativeForm.id" auto-complete="off" :readonly="true"></el-input>
				</el-form-item>
				<el-form-item label="用户昵称" prop="username">
					<el-input v-model="viewRelativeForm.username" auto-complete="off" :readonly="true"></el-input>
				</el-form-item>
				<el-form-item label="级别" prop="level">
					<el-input v-model="viewRelativeForm.level" auto-complete="off" :readonly="true"></el-input>
				</el-form-item>
				<el-tabs :active-name="activeName">
					<el-tab-pane label="下级" :label-content="render" name="down_level">
						<el-table :data="downList" highlight-current-row @selection-change="selsChange"
						          style="width: 100%;">
							<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
							<el-table-column prop="id" label="用户id" align="center"></el-table-column>
							<el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
							<el-table-column label="级别" align="center">
								<template slot-scope="scope">
									<span>{{scope.row.type}}级</span>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="上级" name="up_level">
						<el-form v-if="this.upList.length <= 0" :model="addParentForm" :inline="true"
						         :rules="addParentFormRule" ref="addParentForm">
							<el-col :span="24">
								<el-col :span="12"
								        v-if="this.viewRelativeForm.level == '3级' || this.viewRelativeForm.level == '2级'">
									<el-form-item label="添加一级用户" prop="input1">
										<el-input v-model="addParentForm.input1"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button @click="addParentLevel(1)"
										           v-if="this.viewRelativeForm.level == '3级' || this.viewRelativeForm.level == '2级'">
											添加
										</el-button>
									</el-form-item>
								</el-col>
								<el-col :span="12" v-if="this.viewRelativeForm.level == '3级'">
									<el-form-item label="添加二级用户" prop="input2">
										<el-input v-model="addParentForm.input2"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button @click="addParentLevel(2)"
										           v-if="this.viewRelativeForm.level == '3级'">添加
										</el-button>
									</el-form-item>
								</el-col>
							</el-col>
						
						
						</el-form>
						<el-table :data="upList" border highlight-current-row style="width: 100%;">
							<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
							<el-table-column prop="userId" label="用户id" align="center"></el-table-column>
							<el-table-column prop="nickName" label="用户昵称" align="center"></el-table-column>
							<el-table-column prop="levelStr" label="级别" align="center"></el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button size="small" @click="changeUp(scope.$index, scope.row)">修改</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="viewRelativeFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import {
		getRoleList,
		getPositionList,
		getUserList,
		getUpdateLevel,
		getUserInfo,
		getBalanceList,
		getUserLevelList,
		removeUser,
		batchRemoveUser,
		editUser,
		addUser,
		getUpAndDownLevel,
		removeSysUser,
		getSonLevel,
		getParentLevel,
		updateParentLevel,
		addParentLevel
	} from '@/api/api'
	
	export default {
		data() {
			return {
				// 搜索表单
				filters: {
					date: '',
					name: '',
					level: '',
					input: '',
					searchType: ''
				},
				start: '',
				end: '',
				// 用户列表
				users: [],
				idd: '',
				total: 0,
				size: 10,
				currentPage: 1,
				// 新增用户界面弹窗
				addUserFormVisible: false,
				addUserFormLoading: false,
				addUserForm: {
					headPortrait: "",
					nickName: '',
					sex: '',
					mobile: '',
					password: '',
					storeId: '',
					cardNumber: '',
					level: ''
				},
				addUserFormRules: {
					nickName: [
						{required: true, message: '请输入用户昵称', trigger: 'blur'},
					],
					sex: [
						{required: true, message: '性别为必选项', trigger: 'blur'},
					],
					mobile: [
						{required: true, message: '请输入登录账号', trigger: 'blur'},
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'},
					]
				},
				fileList: [],
				fileTypeAdd: {"fileType": "SUMMARY_EVENT"},
				
				// 级别设置弹框
				isDefault: true,
				show: false,
				arr: [],
				levelSetupFormVisible: false,
				levelSetupFormLoading: false,
				levelSetupFormRules: {
					fullname: [
						{required: true, message: '请输入用户名称', trigger: 'blur'},
					],
					username: [
						{required: true, message: '请输入登录账号', trigger: 'blur'},
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'},
					]
				},
				
				// 账户弹窗
				viewAccountFormVisible: false, //帐户界面是否显示
				viewAccountFormLoading: false,
				viewAccountForm: {//帐户界面数据
				},
				balances: [],
				
				// 上下级弹框设置
				viewRelativeFormVisible: false, //上下级设置界面是否显示
				viewRelativeFormLoading: false,
				id3: '',
				downList: [],
				upList: [],
				viewForm: {},
				
				activeName: 'up_level',
				selected: "",
				roles: [],
				positions: [],
				listLoading: false,
				sels: [], //列表选中列
				currentUserId: 0,
				addParentForm: {
					input1: '',
					input2: ''
				},
				addParentFormRule: {
					/*input1: [
						{ required: true, message: '请输入添加用户的ID', trigger: 'blur' },
					]*/
				},
				
				
				validate: '',
				addLoading: false,
				editAccountRules: {},
				editLoading: false,
				userLevelFormRules: {},
				
				
				userLevelForm: {
					levels: [
						{
							"level": 0,
							"name": "",
							"isDefault": 0
						},
					]
				},
				//上下级设置界面数据
				viewRelativeForm: {
					id: 0,
					nickName: '',
					username: '',
					parentList: [],
					sonList: []
				},
				
				
				//上下级设置界面数据
				levelSetupForm: {
					id: 0,
					fullname: '',
					username: '',
					password: '',
					role: '',
					position: ''
				}
				
			}
		},
		methods: {
			getTime() {//时间处理
				let starttime, endtime = ''
				let time = this.filters.date;
				if (!time[0] == '') {
					starttime = this.moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
				}
				if (!time[1] == '') {
					endtime = this.moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
				}
				if (starttime == "Invalid date") {
					starttime = "";
				}
				;
				if (endtime == "Invalid date") {
					endtime = "";
				}
				;
				this.start = starttime
				this.end = endtime
			},
			formatDateTime: function (row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
			search() {
				this.getTime()
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
				}
				if (!this.start == '') {
					para.startTime = this.start
				}
				if (!this.end == '') {
					para.endTime = this.end
				}
				if (!this.filters.name == '') {
					para.name = this.filters.name
				}
				if (!this.filters.level == '') {
					para.level = this.filters.level
				}
				if (!this.filters.storeId == '') {
					para.roleId = this.filters.storeId
				}
				if (!this.filters.searchType == '') {
					para.searchType = this.filters.searchType
					if (!this.filters.input.replace(/\s/g, "") == '') {
						para.keyword = this.filters.input
					}
				}
				getUserList(para).then((res) => {
					this.users = res.data.data;
					this.total = res.data.totalCount;
					this.listLoading = false;
				})
			},
			getUsers() {//获取用户列表
				let para = {
					pageSize: this.size,
					pageIndex: this.currentPage
				};
				this.listLoading = true;
				getUserList(para).then((res) => {
					this.users = res.data.data;
					this.total = res.data.totalCount;
					this.listLoading = false;
				});
			},
			// 分页详情
			handleSizeChange(val) {
				this.size = val;
				this.getUsers();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getUsers();
			},
			
			//获取角色类型列表
			getRoles() {
				let para = {};
				getRoleList(para).then((res) => {
					console.log(res.data);
					this.roles = res.data.data;
				});
			},
			//获取角色职位列表
			getPositions() {
				let para = {};
				getPositionList(para).then((res) => {
					console.log(res.data);
					this.positions = res.data;
				});
			},
			
			//新增用户界面
			addUser() {
				this.addUserFormVisible = true;
			},
			handleAvatarSuccess(res, file) { //新增上传图片
				console.log(res, file);
				this.$set(this.addUserForm, "headPortrait", res.body);
			},
			addSubmit(addUserForm) {// 新增用户提交
				this.$refs[addUserForm].validate(valid => {
					if (valid) {
						let para = Object.assign(this.addUserForm)
						addUser(para).then(res => {
							this.addUserFormVisible = false;
							this.getUsers();
						})
					}
				})
			},
			//显示级别设置界面
			levelSetup() {
				this.levelSetupFormVisible = true;
				getUserLevelList({}).then((res) => {
					this.arr = res.data.data
				});
			},
			changeStatus(index) {// 修改状态
				let para = {
					id: this.arr[index].id
				}
				getUpdateLevel(para).then((res) => {
					
					getUserLevelList({}).then((res) => {
						this.arr = res.data.data
					})
				})
				
			},
			
			
			//显示查看界面
			handleView(index, row) {
				this.$router.push({path: "/user/userinfo", query: {id: row.id}});
			},
			
			//查看帐户界面
			handleAccount(index, row) {
				this.viewAccountFormVisible = true;
				let para = {
					userId: row.id
				}
				getBalanceList(para).then(res => {
					this.balances = res.data
					this.viewAccountForm = Object.assign({}, row);
				})
				
			},
			//查看上下级界面
			handleRelative(index, row) {
				this.id3 = row.id
				this.viewRelativeFormVisible = true;
				this.viewRelativeForm = Object.assign({}, row);
				let para = {
					id: row.id,
				}
				getSonLevel(para).then((res) => {// 获取下级列表
					let arr1 = []
					let arr2 = []
					res.data.map((val, i) => {
						if (val.secondUsers) {
							if (val.secondUsers.length > 0) {
								val.secondUsers.map(v => {
									arr1.push(v)
								})
							}
						}
						if (val.thirdUsers) {
							if (val.thirdUsers.length > 0) {
								val.thirdUsers.map(v => {
									arr2.push(v)
								})
							}
						}
					})
					this.downList = (res.data.concat(arr1)).concat(arr2)
					//this.downList = arr1.concat(res.data);
				});
				getParentLevel(para).then((res) => {// 获取上级列表
					this.upList = res.data;
					this.listLoading = false;
				});
				
			},
			addParentLevel(level) {
				if (level == 1) {
					let para = {
						id: this.viewRelativeForm.id,
						inviterUserId: this.addParentForm.input1,
						level: level
					}
					addParentLevel(para).then(res => {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						getParentLevel({id: this.viewRelativeForm.id}).then((res) => {// 获取上级列表
							this.upList = res.data;
							this.addParentForm.input1 = ''
						});
					})
				} else {
					let para = {
						id: this.viewRelativeForm.id,
						inviterUserId: this.addParentForm.input2,
						level: level
					}
					addParentLevel(para).then(res => {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						getParentLevel({id: this.viewRelativeForm.id}).then((res) => {// 获取上级列表
							this.upList = res.data;
							this.addParentForm.input2 = ''
						});
					})
				}
			},
			changeUp(index, row) {// 修改上级ID
				this.$prompt('请输入新的ID', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({value}) => {
					let para = {
						userId: this.id3,
						parentUserId: value,
					}
					updateParentLevel(para).then(res => {
						getParentLevel({id: this.viewRelativeForm.id}).then((res) => {// 获取上级列表
							this.upList = res.data;
						});
					})
				}).catch(() => {
				
				});
				
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			
			onTabSelected(value) {
				this.selected = value;
			},
			render(h, tabInstance) {
				return h(select, {
					// 監聽事件 change
					on: {
						change: this.onTabSelected
					}
				});
			}
		},
		mounted() {
			this.getUsers();
			this.getRoles();
		}
	}
</script>

<style lang="scss" scoped>
	
	.add-wrap {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 10px;
	}
	
	.add-wrap p:nth-of-type(1) {
		border: 1px solid #bfcbd9;
		border-radius: 4px;
		height: 34px;
		line-height: 34px;
		width: 100px;
		text-align: center;
	}
	
	.add-wrap p:nth-of-type(2) {
		border-radius: 4px;
		order: 1px solid #20a0ff;
		padding: 10px 40px;
		background-color: #20a0ff;
		color: #fff;
		cursor: pointer;
	}
	
	.add-wrap p:nth-of-type(3) {
		border: 1px solid #bfcbd9;
		border-radius: 4px;
		height: 34px;
		line-height: 34px;
		width: 100px;
		text-align: center;
	}
	
	.add-wrap p:nth-of-type(4) {
		border: 1px solid #bfcbd9;
		border-radius: 4px;
		height: 34px;
		line-height: 34px;
		width: 100px;
		text-align: center;
	}
	
	.el-row {
		margin-bottom: 0px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 0px;
	}
	
	.bg-gray {
		background: #ffffff;
	}
	
	.bg-gray-light {
		background: #ffffff;
	}
	
	.grid-title {
		border-radius: 0px;
		min-height: 32px;
		padding-top: 13px;
		font-size: 18px;
		font-weight: bold;
	}
	
	.grid-content {
		border-radius: 0px;
		min-height: 32px;
		text-align: center;
		padding-top: 13px;
	}
	
	.grid-button {
		border-radius: 0px;
		min-height: 28px;
		text-align: center;
		margin-top: 2px;
	}
	
	.grid-input {
		border-radius: 0px;
		min-height: 28px;
		text-align: center;
		margin-top: 2px;
		margin-left: 5px;
		margin-right: 5px;
	}
	
	.grid-address {
		text-align: left;
		padding-left: 5px;
	}
	
	.grid-description {
		text-align: left;
		padding-top: 10px;
		padding-left: 5px;
		text-size: 15px;
		text-weight: bold;
		color: red;
	}
</style>
